<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>下拉菜单</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <link rel="stylesheet" href="css/a.css">
</head>
<!-- 209000222彭庆楠 -->
<body>
  <div id="app"> </div>
  <template id="root">
    <div class="nav">
      <ul class="nav1">
        <li v-for="item in List" :key="item.name">
          <a href="#">{{item.name}}<span>{{item.english}}</span></a>
          <ul class="nav2">
            <li v-for="subItem in item.child" :key="subItem">
              <a href="#">{{ subItem.name }}</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </template>
  <script>
    //应用实例
    const app = Vue.createApp({
      template: "#root",
      data() {
        return {
          List: [
            {
              name: "首页",
              english: "Home",
            },
            {
              name: "关于红岩",
              english: "HongYan",
              child: [
                { id: 1, name: "红岩文化" },
                { id: 2, name: "博物馆机构" },
                { id: 3, name: "历史沿革" },
              ],
            },
            {
              name: "公告动态",
              english: "Dynamics",
              child: [
                { id: 1, name: "文博信息" },
                { id: 2, name: "政务平台" },
                { id: 3, name: "公告" },
                { id: 4, name: "专题报道" },
              ],
            },
            {
              name: "馆藏精品",
              english: "Collections",
              child: [
                { id: 1, name: "一级文物" },
                { id: 2, name: "二级文物" },
                { id: 3, name: "三级文物" },
              ],
            },
            {
              name: "陈列展览",
              english: "Exhibition",
              child: [
                { id: 1, name: "虚拟展览" },
                { id: 2, name: "基本陈列" },
                { id: 3, name: "复原陈列" },
                { id: 4, name: "临时展览" },
                { id: 5, name: "展览交流" },
              ],
            },
            {
              name: "研究开发",
              english: "Research",
              child: [
                { id: 1, name: "历史研究" },
                { id: 2, name: "艺术创作" },
                { id: 3, name: "影音在线" },
                { id: 4, name: "文创产品" },
              ],
            },
            {
              name: "公共教育",
              english: "Education",
              child: [
                { id: 1, name: "党性教育" },
                { id: 2, name: "爱国主义教育" },
                { id: 3, name: "研学实践教育" },
                { id: 4, name: "科普教育" },
              ],
            },
            {
              name: "参观服务",
              english: "Service",
              child: [
                { id: 1, name: "景点介绍" },
                { id: 2, name: "服务内容" },
                { id: 3, name: "网上预约" },
                { id: 4, name: "志愿服务" },
              ],
            },
            {
              name: "网上预约",
              english: "Reservation",
            },
          ],
        }
      },
    })
    const root = app.mount("#app")
  </script>
</body>

</html>